<template>
    <div>
        <table class="table-bbb table-ccc">
            <template v-for="(val,k) in reserveRes">
                <tr v-if="'物资'!==k">
                    <td>{{k}}</td>
                    <td v-html="due_html(k,val)"></td>
                </tr>
            </template>
        </table>

        <div class="table-s">
            <table class="table-aaa">
                <tr>
                    <th>序号</th>

                    <th>物资名称</th>
                    <th>数量</th>
                    <th>应对灾害种类</th>
                </tr>
                <tr v-for="(row,index) in reserveRes['物资']">
                    <td>{{index+1}}</td>
                    <td>{{row['物资名称']}}</td>
                    <td>{{row['数量']}}{{row['计量单位']?'('+row['计量单位']+')':''}}</td>
                    <td>{{row['应对灾害种类']}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
    import { reserve } from '@/tempData/物资.js'


    export default {
        data() {
            const reserveRes = reserve.find((item) => item['储备库名称'] == this.$route.query.name);
            return {
                reserve, reserveRes,
                name: this.$route.query.name, goods_key: ["物资名称", "数量", "应对灾害种类"]
            }
        },
        methods: {
            due_html(k, val) {
                if (k.includes('电话')) {
                    let html = '';
                    const a_s = String(val).split("\n");
                    a_s.map((n, i) => {
                        html = html + '<a class="phone-num" href="tel:' + n + '">' + n + '</a>';
                    })

                    return html;
                }
                return val
            }
        },
    }
</script>
<style scoped>
    a.phone-num {
        display: block;
        margin-top: 15px;
    }

    a.phone-num:nth-child(1) {
        margin-top: 0;
    }
</style>